<template>
	<view class="content act">
		<!--top banner-->
		<!--正常banner-->
		<template v-if="topBannerType==1">
			<view class="banner top-banner" v-if="topBannerList.length">
				<u-swiper bg-color="#fff" :list="topBannerList" border-radius="0" img-mode="scaleToFill"
					indicator-pos="bottomLeft" height="160" :circular="false" @click="handleTopBannerClick"></u-swiper>
			</view>
		</template>
		<!--跳转至京东小程序的banner-->
		<template v-else-if="topBannerType==2">
			<view class="banner top-banner" v-if="topBannerList.length">
				<u-swiper bg-color="#fff" :list="topBannerList" border-radius="0" img-mode="scaleToFill"
					indicator-pos="bottomLeft" height="160" :circular="false" @click="handleTopBannerClick2"></u-swiper>
			</view>
		</template>
		<!--circle-->
		<template v-if="fullStopStatus=='1'">
			<!--普通充电-->

			<view :class="{'ring':true,'active':!topBannerList.length?true:false}" v-if="totalTime!=0">
				<u-circle-progress active-color="#0DA297" :percent="percent" width="450" class="progress">
					<view class="u-progress-content">
						<view class="countdown-time">
							<u-count-down :timestamp="remainingTime" font-size="80" separator-size="80"
								@change="handleCountdownChange" @end="handleCountdownEnd"></u-count-down>
						</view>
						<view class="countdown-txt">{{percent==100?'充电结束':'距充电结束还有'}}</view>
					</view>
				</u-circle-progress>
			</view>
		</template>
		<template v-else-if="fullStopStatus=='2'">
			<!--充满即停-->
			<view :class="{'ring':true,'active':!topBannerList.length?true:false}">
				<u-circle-progress active-color="#0DA297" :percent="100" width="450" class="progress">
					<view class="u-progress-content">
						<view class="countdown-time">
							<text class="full-stop">{{pastTime | timeFilter}}</text>
						</view>
						<view class="countdown-txt">已充电时间</view>
					</view>
				</u-circle-progress>
			</view>
		</template>
		<!--中部大片文字区域-->
		<view class="center-txt-wrap" v-if="centerTxt">
			<view class="center-txt">
				<view>
					<image mode="widthFix" class="center-img" src="../../static/images/center-img.png"></image>
				</view>
				<view><text>{{centerTxt}}</text></view>
			</view>
		</view>

		<view class="center-one" v-if="centerOne.length">
			<view @click="handleCenterOne(i)" v-for="(item,i) in centerOne" :key="i">
				<image mode="widthFix" :src="item.img"></image>
			</view>
		</view>

		<view class="center-two" v-if="centerTwo.length">
			<text class="center-two-1" @click="handleCenterTwo(0)"
				v-if="centerTwo[0].name">{{centerTwo[0].name}}</text><text class="center-two-2"
				v-if="centerTwo[1].name">|</text><text class="center-two-3" @click="handleCenterTwo(1)"
				v-if="centerTwo[1].name">{{centerTwo[1].name}}</text>
		</view>
		<!--底部bannner-->
		<!--正常banner-->
		<template v-if="bottomBannerType==1">
			<view class="bottom-banner" v-if="bottomBannerList.length">
				<view>
					<u-swiper bg-color="#fff" :list="bottomBannerList" border-radius="0" img-mode="scaleToFill"
						indicator-pos="bottomLeft" height="160" :circular="false"
						@click="handleBottomBannerClick"></u-swiper>
				</view>
				<view class="bottom-safe-area"></view>
			</view>
		</template>
		<!--跳转至京东小程序的banner-->
		<template v-else-if="bottomBannerType==2">
			<view class="bottom-banner" v-if="bottomBannerList.length">
				<view>
					<u-swiper bg-color="#fff" :list="bottomBannerList" border-radius="0" img-mode="scaleToFill"
						indicator-pos="bottomLeft" height="160" :circular="false"
						@click="handleBottomBannerClick2"></u-swiper>
				</view>
				<view class="bottom-safe-area"></view>
			</view>
		</template>
		<!--广告弹窗-->
		<cover-view v-if="advPopupShow" class="adv-shadow">
			<cover-view class="adv-wrap">
				<cover-image class="adv-image" @click.stop="handleAdvClick" mode="widthFix"
					:src="adv.image"></cover-image>
				<cover-image class="adv-close" @click.stop="handleAdvClose" mode="widthFix" :src="icon"></cover-image>
			</cover-view>
		</cover-view>

		<common-drag />
		<!--底部弹窗-->
		<cover-view v-if="bottomPopupShow" class="bottom-shadow">
			<cover-view class="bottom-popup-wrap">
				<cover-image mode="heightFix" class="bottom-popup-img" :src="bottomPopup.halfsize_img"></cover-image>
				<cover-image class="bottom-popup-close" @click.stop="handleBottomPopupClose" mode="widthFix"
					src="../../static/images/popup-01.png"></cover-image>
				<cover-view v-if="bottomPopup.open == 1" class="bottom-popup-txt"
					@click.stop="handleBottomPopup">{{bottomPopup.halfsize_name}}</cover-view>
			</cover-view>
		</cover-view>
	</view>
</template>
<script>
	var timer = null;
	export default {
		data() {
			return {

				//图片资源
				icon: this.$imgUrl + 'index/close1.png',
				icon1: this.$imgUrl + 'charge/weixiu.png',
				icon2: this.$imgUrl + 'charge/no-full.png',
				icon3: this.$imgUrl + 'charge/home.png',
				//data
				id: '',
				status: '',
				onOff: true,
				chargingText: '',
				//Countdown
				fullStopStatus: null, //1普通，2充满即停，3充电完成

				totalTime: 0, //The total time is always the same
				remainingTime: 0, //The remaining time is obtained by the interface
				percent: 0, //The percentage is calculated based on the total, total time and the remaining time
				elapsedTime: 0,
				//充满即停部分数据
				pastTime: 0,
				//Pop-up advertisement
				advPopupShow: false,
				adv: {},
				//top banner
				topBannerList: [],
				currentTopBanner: null, //For anti-shake
				topBannerType: '1',
				//bottom banner
				bottomBannerList: [],
				currentBottomBanner: null, //For anti-shake
				bottomBannerType: "1",
				//半屏小程序相关数据
				isHasHalfScreen: false,
				appId: '',
				path: '',
				//中部
				centerTxt: '',
				centerOne: [],
				centerTwo: [],
				//底部弹窗
				bottomPopupShow: false,
				bottomPopup: null,
				// community_name
				community_name: '', // 社区名称
				log_id: '', // 订单id
				half_screen: null, // 小程序半屏弹窗 1显示新的 2显示老的 3都不显示
				timers:null,
			}
		},
		onShow() {
			this._timeRequest();
		},
		onHide() {
			clearInterval(timer);		
		},
		onUnload() {
			clearInterval(timer);

		},
		onLoad(options) {

			if (options.id) {
				this.id = options.id;
			};
			if (options.status) {
				this.status = options.status;
			};

		},
		methods: {
			_timeRequest() {
				clearInterval(timer);

				this.getDataRequest();
				timer = setInterval(() => {
					this.getDataRequest();
				}, 60000);
			},
			getDataRequest() {
				this.$u.api.getCountdown({
					user_log_id: this.id,

					scan_code: uni.getStorageSync('officialAccount') ? '2' : '1',
					coupon: this.status,
				}).then(res => {
					if (this.onOff) {

						this.topBannerType = res.data.carousel_first_show;
						if (this.topBannerType == 1) {
							let topArr = res.data.carousel_first;
							let topLen = topArr.length;
							let topBannerList = [];
							for (let i = 0; i < topLen; i++) {
								let json = {

									image: topArr[i].img,

									originalData: topArr[i],
								};

								topBannerList.push(json);
							};
							this.topBannerList = topBannerList;
						} else if (this.topBannerType == 2) {
							this.topBannerList = [{
								image: "https://swa.zhilii.com/img/208/ttcd541.jpg"
							}]
						};

						this.bottomBannerType = res.data.carousel_two_show; //保存这个状态
						if (this.bottomBannerType == 1) {
							let bottomArr = res.data.carousel_two;
							let bottomLen = bottomArr.length;
							let bottomBannerList = [];
							for (let j = 0; j < bottomLen; j++) {
								let json = {

									image: bottomArr[j].img,
									originalData: bottomArr[j],
								};
								bottomBannerList.push(json);
							};
							this.bottomBannerList = bottomBannerList;
						} else if (this.bottomBannerType == 2) {
							this.bottomBannerList = [{
								image: "https://swa.zhilii.com/img/208/ttcd541.jpg"
							}]
						};

						//广告弹窗
						if (res.data.pop_up.length) {
							let obj = res.data.pop_up[0];
							let adv = {
								image: obj.img,
								originalData: obj,
							};
							this.adv = adv;
						};

						if (res.data.pop_up.length) this.advPopupShow = true;

						this.chargingText = res.data.hint;		

						this.bottomPopup = res.data.halfsiza_applet;
						this.bottomPopupShow = res.data.halfsize_open == '1';
						this.community_name = res.data.community_name;
						this.log_id = res.data.log_id;
						//中部大片文字区域
						this.centerTxt = res.data.text;

						let centerOne = res.data.module.filter(item => item.open == '1');
						this.centerOne = centerOne;

						let centerTwo = res.data.module_x.filter(item => item.open == '1');
						this.centerTwo = centerTwo;
						//播放语音
						if (res.data.voice.open == '1') {
							this.$utils.playAudio(res.data.voice.voice);
						};

						//半屏小程序
						this.isHasHalfScreen = res.data.applet_open == '1';
						this.half_screen = res.data.half_screen;
						this.appId = res.data.applet_appid;
						this.path = res.data.applet_connect;
						this.onOff = false;
					}

					if (res.data.full_stop == "2") {
							this._getCountdownFullStop(res.data.start_timestamp);
						};
					//1普通充电，2充满即停，3充电结束
					this.fullStopStatus = res.data.full_stop;
					if (res.data.residue_timestamp == "0") {
						this._jumpOver();
					} else if (res.data.full_stop == "1") {
						//普通充电
						this._getCountdown(res.data.all_timestamp, res.data.residue_timestamp);
					};


				}).catch(() => {});
			},
			//adv popup
			handleAdvClick() {
				// half_screen 1: 不关弹窗  2：关弹窗
				if(this.adv.originalData.half_screen == 3){
					this.advPopupShow = false;	
				}
				 this.$utils.oldCommonJump({
				 	...this.adv,
				 	from: '7'
				 }); 
			},
			//处理广告关闭的逻辑。
			handleAdvClose() {
				this.advPopupShow = false;
				if (this.half_screen == 1) {
					getApp().globalData.ygEmpPlugin.openEmbeddedMP();
				} else if (this.half_screen == 2) {
					if (this.isHasHalfScreen) {
						this.$utils.halfScreen(this.appId, this.path);

					};
				}

			},

			//top banner
			handleTopBannerClick(index) {
				this.currentTopBanner = {
					originalData: this.topBannerList[index].originalData,
					from: '5',
				};
				this.$u.debounce(this._topBannerDebounce, this.$debounceTime, true);
			},
			_topBannerDebounce() {
				this.$utils.oldCommonJump(this.currentTopBanner);
			},
			handleTopBannerClick2() {
				//打开京东广告的小程序;
				uni.navigateToMiniProgram({
					appId: 'wx91d27dbf599dff74',
					path: '/pages/union/proxy/proxy?spreadUrl=https%3A%2F%2Fu.jd.com%2FpwSnPAp&EA_PTAG=jingdonghuimin',
					envVersion: 'release'
				})
				this.$u.api.getChargings({
					appid: 'wx91d27dbf599dff74',
					appPath: '/pages/union/proxy/proxy?spreadUrl=https%3A%2F%2Fu.jd.com%2FpwSnPAp&EA_PTAG=jingdonghuimin'
				}).then(res => {});
			},
			//bottom banner
			handleBottomBannerClick(index) {
				this.currentBottomBanner = {
					originalData: this.bottomBannerList[index].originalData,
					from: '6',
				};
				this.$u.debounce(this._bottomBannerDebounce, this.$debounceTime, true);
			},
			_bottomBannerDebounce() {
				this.$utils.oldCommonJump(this.currentBottomBanner);
			},
			handleBottomBannerClick2() {
				this.handleTopBannerClick2();
			},
			jumpRepair() {
				if (this.fullStopStatus == '1') {
					//普通充电
					if (this.elapsedTime <= 1800) {
						// #ifdef	MP-WEIXIN
						uni.navigateTo({
							url: '/pages/charge/repair?id=' + this.id + '&community_name=' + this.community_name +
								'&log_id=' + this.log_id
						});
							// #endif
							// #ifdef	MP-ALIPAY
							uni.navigateTo({
								url: '/pages/charge/repair?id=' + this.id + 
									'&log_id=' + this.log_id
							});
							// #endif
					} else {
						//不让报修
						this.$utils.toast('抱歉，您的充电时间已超过30分钟无法报修！')
					};
				} else if (this.fullStopStatus == '2') {
					//充满即停
					if (this.pastTime <= 1800) {
					// #ifdef	MP-WEIXIN
					uni.navigateTo({
						url: '/pages/charge/repair?id=' + this.id + '&community_name=' + this.community_name +
							'&log_id=' + this.log_id
					});
						// #endif
						// #ifdef	MP-ALIPAY
						uni.navigateTo({
							url: '/pages/charge/repair?id=' + this.id + 
								'&log_id=' + this.log_id
						});
						// #endif
					} else {
						//不让报修
						this.$utils.toast('抱歉，您的充电时间已超过30分钟无法报修！')

					};
				};

			},

			_jumpOver() {

				clearInterval(timer);
				this.advPopupShow = false;
				this.$utils.toastCallback('充电已结束！', () => {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				})
			},
			//停止充电
			endCharge() {
				this.$u.throttle(() => {
					this.$u.api.isCountdown({
						user_log_id: this.log_id,
					}).then(res => {
						// 不连续触发关闭事件 防抖
						this.$utils.modal({
							title: '温馨提示',
							content: res.data.hint,
							callback: (bool) => {
								if (bool) {
									this.endCharingRequest();
								}
							}
						});
					}).catch(err => {})
					
				}, 1000);
			},
			endCharingRequest() {
				this.$u.api.endCharging({

					charge_id: this.id,
				}).then(res => {
					if (res.return_code == '200') {
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false,
							callback: (bool) => {
								uni.reLaunch({
									url: '/pages/index/index'
								});
							}
						});
					};

				}).catch(err => {})
			},

			_getCountdown(totalTime, remainingTime) {

				this.totalTime = totalTime; //The total time is always the same
				this.remainingTime = remainingTime;
				this.percent = parseInt(((totalTime - remainingTime) / totalTime) * 100);

				this.elapsedTime = totalTime - remainingTime;
			},

			handleCountdownChange(pastTime) {
				this.percent = parseInt(((this.totalTime - pastTime) / this.totalTime) * 100);
				this.elapsedTime = this.totalTime - pastTime;
			},
			handleCountdownEnd() {
				//payment successful
				this._jumpOver();

			},
			//充满即停部分
			_getCountdownFullStop(startTimestamp) {
				this.pastTime = (Date.parse(new Date()) / 1000) - startTimestamp;
				 clearInterval(this.timers);
				  this.timers = setInterval(() => {
					this.pastTime += 1;
				}, 1000);
			},
			//中部区域
			handleCenterOne(i) {

				let name = this.centerOne[i].name;
				let type = this.centerOne[i].type;
				let phone = this.centerOne[i].phone;

				if (type == '1') {
					if (name == '停止充电') {
						this.endCharge();
					} else if (name == '设备报修') {
						this.jumpRepair();
					};
				} else if (type == '2') {

					uni.makePhoneCall({
						phoneNumber: phone
					});
				} else if (type == '3') {
					this.$utils.jumpWebview(this.centerOne[i].url);
					/* uni.navigateTo({
						url: "/pages/webview/index?url=" +encodeURIComponent(JSON.stringify(this.centerOne[i].url)) 
					}) */
				};
			},
			// type 1 设备报修 type 3 跳转到h5
			handleCenterTwo(i) {
				if (this.centerTwo[i].type == '1') {
					if (this.centerTwo[i].name == '设备报修') {

						this.jumpRepair();
					}
				} else if (this.centerTwo[i].type == '2') {

					uni.makePhoneCall({
						phoneNumber: this.centerTwo[i].phone
					});
				} else if (this.centerTwo[i].type == '3') {
					this.$utils.jumpWebview(this.centerTwo[i].url);
					/* uni.navigateTo({
						url: "/pages/webview/index?url=" + encodeURIComponent(JSON.stringify(this.centerTwo[i].url))
					}) */
				}
			},
			//底部弹窗
			handleBottomPopupClose() {
				this.bottomPopupShow = false;
			},
			// 0不跳转 1本地 2 H5  3跳转小程序  4拨打电话
			handleBottomPopup() {
				 let that = this;
				
				
				if (that.bottomPopup.type == 0) {
					that.bottomPopupShow = false;
				} else if (that.bottomPopup.type == 1) {
					uni.navigateTo({
						url: that.bottomPopup.self_url,
					});
				} else if (that.bottomPopup.type == 2) {
					this.$utils.jumpWebview(that.bottomPopup.url);
				} else if (that.bottomPopup.type == 3) {
					uni.navigateToMiniProgram({
						appId: that.bottomPopup.car_shop_appid,
						path: that.bottomPopup.url_platform,
						extraData: {
							'data1': 'test'
						},
						success(res) {
							// 打开成功

							that.$u.api.getChargings({
								appid: that.bottomPopup.car_shop_appid,
								appPath: that.bottomPopup.url_platform
							}).then(res => {});

						}
					})
				} else if (that.bottomPopup.type == 4) {
					//拨打电话
					uni.makePhoneCall({
						phoneNumber: that.bottomPopup.phone
					});
				}

			}

		}
	}
</script>
<style lang="scss" scoped>
	.act {
		padding-bottom: 160rpx;
	}

	.adv-wrap {
		width: 600rpx;
		position: absolute;
		left: 52.5%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 7000;
		padding: 50rpx 40rpx 0 0;

		/*  #ifdef MP-ALIPAY */
		background-color: rgba(0, 0, 0, 0);
		/*  #endif  */
	}

	.adv-image {
		width: 600rpx;
		height: 720rpx;
		display: block;
		z-index: 7000;
		position: relative;
	}

	.adv-wrap .special-button {
		width: 320rpx;
		height: 70rpx;
		text-align: center;
		border-radius: 36rpx;
		line-height: 70rpx;
		color: #F00;
		position: absolute;
		background-color: #fff;
		left: 50%;
		transform: translateX(-50%);
		bottom: 40rpx;
		z-index: 9999;
	}

	.ring {
		text-align: center;

		margin-bottom: 40rpx;

		padding-top: 300rpx;


	}

	.ring.active {
		padding-top: 370rpx !important;
	}


	.bottom-banner {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 10;
	}

	.countdown-txt {
		font-size: 30rpx;
		font-weight: 500;
		color: #666;
		text-align: center;
		padding-top: 60rpx;
	}

	.countdown-time {
		text-align: center;
	}

	.full-stop {
		font-size: 80rpx;
		color: #333;
	}

	.adv-shadow {
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 7000;
		background-color: rgba(0, 0, 0, 0.6);

	}

	.adv-close {
		display: block;
		margin:40rpx auto 0;
	/* 	position: absolute;
		right: 0;
		top: 0; */
		width: 50rpx;
		height: 50rpx;
		opacity: 0.7;
		z-index: 7001;
		/* position:absolute;
		right:-20rpx;
		top:-20rpx;
		width:40rpx;
		height:40rpx;
		opacity: 0.7;
		z-index: 9999; */
	}

	.center-txt-wrap {
		padding: 0 40rpx;
	}

	.center-txt {
		font-size: 28rpx;
		color: #111;
		display: flex;
		background-color: #F8F8F8;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.center-txt>view:nth-child(1) {
		flex: 1;
	}

	.center-txt>view:nth-child(2) {
		flex: 9;
	}

	.center-img {
		width: 35rpx;
		height: 35rpx;
		vertical-align: middle;
	}

	.center-one {
		padding: 0 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.center-one>view {
		flex: 1;
	}

	.center-one image {
		width: 100%;
		display: block;
	}

	.center-two {
		text-align: center;
		font-size: 30rpx;
		color: #266CF2;
		padding-bottom: 40rpx;
	}

	.center-two-2 {
		padding: 0 40rpx;
	}

	.center-two text {
		vertical-align: middle;
	}

	.bottom-popup-img {
		width: 100%;
		height: 600rpx;
		position: relative;
		z-index: 8000;
	}

	.bottom-popup-close {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		width: 36rpx;
		height: 36rpx;
		opacity: 0.7;
		z-index: 9001;
		padding: 10rpx;
	}

	.bottom-shadow {
		height: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 9000;
		background-color: rgba(0, 0, 0, 0.6);

	}

	.bottom-popup-wrap {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: -20rpx;
		z-index: 9000;
		height: 1140rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		box-sizing: border-box;
		padding: 80rpx 30rpx;
	}

	.bottom-popup-txt {
		width: 100%;
		height: 88rpx;
		border-radius: 44rpx;
		background-color: #1BA89E;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-size: 30rpx;
		margin-top: 40rpx;
	}

	.top-banner {
		width: 100%;
		height: 200rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}
</style>
<style>
	page {
		height: 100%;
		background-color: #fff;
	}
</style>